<template>
	<view>
		<hd-navbar :showHomeIcon="false" :back="true" title="定单列表" :showInput="false" :showCartIcon="false"></hd-navbar>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			:style="{height:`${swiperHeight}px`}">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y @scrolltolower="onreachBottom" :style="{height:`${swiperHeight}px`}"
					class="pt-30 bg-gray-100 w-full">
					<order-item v-for="order in orders" :key="order.id" :order="order" class="mb-20"></order-item>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" v-for="(item, index) in 4" :key="index">
				<scroll-view scroll-y @scrolltolower="onreachBottom" :style="{height:`${swiperHeight}px`}"
					class="pt-30 bg-gray-100 w-full">
					<order-item v-for="order in orders" :key="order.id" :order="order" class="mb-20"
						v-show="order.state==index+1"></order-item>
				</scroll-view>
			</swiper-item>
		</swiper>
		<hd-tabbar></hd-tabbar>
	</view>
</template>

<script>
	import OrderItem from './components/OrderItem.vue';
	export default {
		components: {
			OrderItem
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '已支付'
				}, {
					name: '发货中'
				}, {
					name: '已完成'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的,
				orders: []
			};
		},
		computed: {
			swiperHeight() {
				return uni.getSystemInfoSync().windowHeight - 64 - 86
			},
			//定单类型
			orderType() {
				return this.current + 1;
			}
		},
		async created() {
			this.orders = await this.$api.get(`member/order`)
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
			}
		}
	};
</script>
